<template>
  <div ref="main" style="width: 90%; height: 85%;"></div>

</template>
<script lang='js' setup>
import * as echarts from 'echarts';
import { ref, onMounted, watch, toRaw } from 'vue';
import axios from 'axios';
import { pa, ta } from 'element-plus/es/locale/index.mjs';
import { useNodeDataStore } from '../store/node_data.ts';
import { useLinkDataStore } from '../store/link_data.ts';
import { useChosenNodeStore } from '../store/chosen_node.ts';
import { storeToRefs } from 'pinia';
import { dataType } from 'element-plus/es/components/table-v2/src/common.mjs';
import { lab, line } from 'd3';


let main = ref();
let usenodes = useNodeDataStore();
let uselinks = useLinkDataStore();

let { nodes } = storeToRefs(usenodes);
let { links } = storeToRefs(uselinks);
// console.log(nodes);
// console.log(links);
let chosen_node = useChosenNodeStore();
// console.log("ahhaha",chosen_node.index);

let url = '127.0.0.1:4523';
// console.log(nodes);
//用axios获取数据
let getnode = () => {
  return axios.get(`http://${url}/m1/3601483-3229948-default/node/nodes2`)
    .then(function (response) {
      // 获取并处理数据
      let data = response.data;
      //toRef(data.data.nodes);
      nodes.value = data.data.nodes;
      // nodes = data.data.nodes;
      // console.log(nodes);
    })
    .catch(function (error) {
      console.log(error);
    });
}
let getlink = () => {
  return axios.get(`http://${url}/m1/3601483-3229948-default/link/links`)
    .then(function (response) {
      // 获取并处理数据
      let data = response.data;
      links.value = data.data.links;
      console.log(links);
      //把links的source和target转为string
      links.value.forEach((item) => {
        item.source = item.source.toString();
        item.target = item.target.toString();
      });
    })
    .catch(function (error) {
      console.log(error);
    });
}

let myChart;
let line_opacity = 1;
let node_opacity = 1;
let changeLineColor_id = ref(-1);


let initChart = () => {
  resetLineColor();//还原线的颜色
  changeLineColor(changeLineColor_id);//绘图前先改变颜色
  if (!myChart) {
    myChart = echarts.init(main.value);
  }
  //清空画布
  myChart.clear();
  // 绘制图表
  myChart.setOption({
    title: {

    },
    tooltip: {},

    series: [
      {
        name: '节点信息',
        type: 'graph',
        draggable: true,
        roam: true,
        zoom: 3,
        // symbol: 'image://../../网络节点.png',
        symbol: function (value, params) {
          // console.log(params.data.congestionLevel);
          if (params.data.congestionLevel > 60) {
            return 'image://../../网络节点_拥塞.png';
          } else {
            return 'image://../../网络节点.png';
          }
        },
        symbolSize: 15,
        edgeSymbol: ['circle', 'arrow'],
        edgeSymbolSize: [4, 15],
        label: {
          show: true,
          position: 'right',
          distance: 5,
          fontSize: 15,
          color: 'rgba(255,255,255,0.8)',
          formatter: function (params) {
            // console.log(params);
            return params.data.id;
          }
        },
        layout: 'force',
        force: {
          repulsion: 100,
          edgeLength: 50
        },
        emphasis: {
          focus: 'self',
          lineStyle: {
            width: 10
          }
        },
        lineStyle: {
          color: 'rgba(255,255,255,0.8)',
          curveness: 0.1,
          width: 4,
          type: 'solid',
          opacity: line_opacity
        },
        itemStyle: {
          //改变节点的颜色
          // color: 'rgba(39, 245, 208, 0.8)',
          color: 'rgba(39, 245, 208, 0.8)',
          opacity: node_opacity
        },
        tooltip: {
          enterable: true,
          // backgroundColor: 'rgba(0,0,0,0.7)',
          // textStyle: {
          //   color: '#fff'
          // },
          formatter: function (params) {
            if (params.dataType === 'node') {
              return '节点ID：' + params.data.id + '<br>' +
                'cpu利用率：' + params.data.cpuUtilization + '<br>' +
                '内存利用率：' + params.data.memoryUtilization + '<br>' +
                'ip地址：' + params.data.nodeIp + '<br>' +
                '拥塞：' + params.data.congestionLevel + '<br>' +
                '目标：' + params.data.target + '<br>' +
                '分流百分比：' + params.data.diversionPercentage + '<br>' +
                '是否分流：' + params.data.diversion;
            } else {
              return '节点' + (params.data.source) + '到节点' + (params.data.target) + '<br>' +
                '时延：' + params.data.latency + '<br>' +
                '抖动：' + params.data.jitter + '<br>' +
                '带宽利用率：' + params.data.bandwidthUtilization + '<br>' +
                '创建时间：' + params.data.createdTime;
            }

          }
        },
        data: nodes.value
        ,
        links: Processed_links

      },
    ]
  });
  myChart.on('click', function (params) {
    if(params.dataType === 'node'){
      //找该节点的index
      let index = nodes.value.findIndex((item) => {
        return item.id === params.data.id;
      });
      // console.log(index);
      //将该节点的信息存入chosen_node
      chosen_node.index = index;
    }
    // console.log(chosen_node.index);

    //改变线的颜色
    changeLineColor_id.value = params.data.id;

  });
}

let getProcessed_links = () => {
  return JSON.parse(JSON.stringify(links.value));
}
let Processed_links = getProcessed_links();
// let Processed_links = toRaw(links.value);
//console.log(toRaw(links.value));
// console.log(Processed_links);
let changeLineColor = (changeLineColor_id) => {
  // console.log('changeLineColor');

  // console.log(changeLineColor_id.value);
  // 得到特定节点的 id 和 target 列表（根据传入的 nodeId 进行过滤）
  let best = [];
  
  // 找到对应的节点
  let selectedNode = nodes.value.find(item => item.id === changeLineColor_id.value);
  
  if (selectedNode) {
    // console.log(selectedNode);
    
    // 解析 target 字符串
    let targets;
    if (selectedNode.target === "0") {
      // 如果 target 是 "0"，将其视为单个目标
      targets = [0];
    } else {
      try {
        // 尝试将字符串解析为数组
        targets = JSON.parse(selectedNode.target);
      } catch (error) {
        // 如果解析失败（可能是单个数字的字符串），将其转换为数组
        targets = [Number(selectedNode.target)];
      }
    }

    // 如果 target 是数组，遍历它；如果是单个数字，则直接处理
    if (Array.isArray(targets)) {
      targets.forEach((targetItem) => {
        let best_link = {
          source: String(selectedNode.id),   // 源 id 转换为字符串
          target: String(targetItem)         // 目标 id 也转换为字符串
        };
        best.push(best_link);  // 将每对 source-target 加入数组
      });
    } else {
      // 处理单个 target 的情况
      let best_link = {
        source: String(selectedNode.id),
        target: String(targets)
      };
      best.push(best_link);
    }

    // 在 Processed_links 中找到与 best 中匹配的 source 和 target，改变线的颜色为绿色
    Processed_links.forEach((item) => {
      best.forEach((best_item) => {
        if (item.source === best_item.source && item.target === best_item.target) {
          // 修改线的样式
          item.lineStyle = {
            color: 'rgba(39, 245, 208, 0.8)',  // 绿色
            curveness: 0.1,
            width: 4,
            type: 'solid',
            opacity: line_opacity
          };
        }
      });
    });
  } else {
    console.log('no selectedNode');
  }
};

//还原线的颜色
let resetLineColor = () => {
  // 遍历所有 Processed_links，重置每条线的样式为默认状态
  Processed_links.forEach((item) => {
    item.lineStyle = {
      color: 'rgba(255, 255, 255, 0.8)',  // 默认颜色：白色
      curveness: 0.1,                      // 默认曲率
      width: 4,                            // 默认宽度
      type: 'solid',                       // 默认线类型：实线
      opacity: line_opacity                // 默认透明度，使用全局变量 line_opacity
    };
  });
};





//监视nodes和links的变化
watch([nodes, links], (newVal, oldVal) => {
  console.log('nodes or links changed');
  // console.log(newVal);
  // console.log(oldVal);
  Processed_links = getProcessed_links();
  initChart();
}, { deep: true });

//监视changeLineColor_id的变化
watch(changeLineColor_id, (newVal, oldVal) => {
  // console.log('changeLineColor_id changed');
  initChart();
}, { deep: true });


//每隔5分钟刷新一次
setInterval(() => {
  getnode();
  getlink();
  console.log('refresh');
}, 30000);



onMounted(() => {
  // 使用 Promise.all 等待 getnode 和 getlink 都完成后再初始化图表
  // Promise.all([getnode(), getlink()]).then(() => {
  initChart();
  // });
});

</script>
<style scoped>
div {
  margin: auto;
  padding-top: 3%;
}
</style>
